<script lang="ts" setup>
import { onMounted, ref, computed } from 'vue';
import API from '@/services';

const props = defineProps<{ id: number | string }>();
const totalNum = ref(0);
const nowPageNum = ref(1);
const nowPageSize = ref(10);
const nowTableId = computed(() => props.id as number);
const changeLogList = ref<any>();

const getChangeLog = async () => {
  const params = {
    pageNum: nowPageNum.value,
    pageSize: nowPageSize.value,
    tableId: nowTableId.value
  };
  try {
    console.log(params, '此时变更记录参数');
    const res = await API.dataTable.postDataTableFieldLogPageQuery({ ...params });
    if (res.data) {
      totalNum.value = Number(res.data.total);
      changeLogList.value = res.data.list || [];
    }
  } catch (error) {
    throw error;
  }
};

// 改变页数
const changePageNum = (val: number) => {
  nowPageNum.value = val;
  getChangeLog();
};

onMounted(() => {
  getChangeLog();
});

defineExpose({ getChangeLog });
</script>

<template>
  <div class="change-log">
    <a-timeline mode="left" labelPosition="relative" class="record-timeline">
      <a-timeline-item
        :label="item.createTime"
        :dotColor="index === 0 && nowPageNum === 1 ? '#3C6EFF' : '#E8EBF2'"
        v-for="(item, index) in changeLogList"
        :key="item.id"
      >
        <div class="item-change">
          <span class="name">{{ item.createByName }}</span>
          <span class="operate-type">{{ item.operateType }}</span>
          <span class="change-desc">{{ item.content }}</span>
        </div>
      </a-timeline-item>
    </a-timeline>
    <a-row v-if="totalNum > 0">
      <a-col :span="24">
        <a-pagination
          :total="totalNum"
          show-total
          @change="changePageNum"
          style="
            justify-content: flex-end;
            margin-bottom: 18px;
            margin-right: 18px;
          "
        />
      </a-col>
    </a-row>
  </div>
</template>

<style lang="scss" scoped>
::v-deep(.arco-timeline-item.arco-timeline-item-last)
  .arco-timeline-item-dot-wrapper
  .arco-timeline-item-dot-line {
  display: block;
}
::v-deep(.arco-timeline-item:last-child) {
  .arco-timeline-item-dot-wrapper {
    .arco-timeline-item-dot-line {
      display: none;
    }
  }
}
.change-log {
  padding: 8px 24px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  .item-change {
    font-size: 12px;
    letter-spacing: 0;
    line-height: 20px;
    .name {
      color: #33353b;
      font-weight: 600;
      padding-right: 30px;
    }

    .operate-type {
      color: #60646f;
      font-weight: 400;
      padding-right: 30px;
    }
    .change-desc {
      color: #60646f;
      font-weight: 400;
      padding-right: 30px;
    }
  }
}
</style>

<style lang="scss">
.record-timeline {
  .arco-timeline-item-vertical-left.arco-timeline-item-label-relative {
    margin-left: 160px;
  }
  .arco-timeline-item-label-relative > .arco-timeline-item-label {
    max-width: 160px;
  }
  .arco-timeline-item-dot {
    width: 12px;
    height: 12px;
  }
  .arco-timeline-item-dot-wrapper .arco-timeline-item-dot-content {
    width: 12px;
  }
  .arco-timeline-item-dot-line {
    width: 2px;
    background: #e8ebf2;
  }
}
</style>
